

<div class="root">
  <div class="atlas">
    <LazyImage src="assets/images/renders/layers-{subject}-{index}.jpg" aspectRatio={4/3} border={false} />
  </div>

  <div class="thumbnail">
    <div style="position: relative;">
      <div style="opacity: 0.4;">
        <LazyImage border={false} background={false} src="assets/images/renders/thumbnail-{layerName}.jpg" alt="thumbnail for {layerName}" />
      </div>
      <AtlasReticle
        aspectRatio={4/3}
        scale={homeScale}
        gcx={homeX}
        gcy={homeY}
        enableDragging={false}
      />
    </div>
  </div>

  <div class="figcaption">
    {@html caption}
  </div>
</div>
<script>
export default {
  components: { 
    LazyImage: "../library/LazyImage.html",
    AtlasReticle: "../AtlasStaticReticle.html"
  },
  data() {
    return {
      caption: "",
      layerName: "mixed4c",
      gridSize: 3,
      homeScale: 16 * 3,
      showLabels: true
    }
  }
}
</script>

<style>

  .thumbnail {
    position: relative;
    margin: 20px auto;
    max-width: 100px;
  }
  @media(min-width: 800px) {
    .thumbnail {
      margin: 0 20px 0 0;
      grid-area: 2/auto/2/3;
    }
    .figcaption {
      /* grid-area: 2/auto/1/2; */
    }
    .root {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr auto;
      grid-gap: 20px;
    }
    .atlas {
      grid-area: 1/1/1/3;
      border-radius: 8px;
      overflow: hidden;
    }
  }
</style>